<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#bigger").click(function(){
                $(".c1").css("font-size",parseInt($(".c1").css("font-size")) + 1 + "px");
            });
            $("#small").click(function(){
                $(".c1").css("font-size",parseInt($(".c1").css("font-size")) - 1 + "px");
            });
            $("#hide").click(function(){
                $(".c1").css("display","none");
            });
            $("#show").click(function(){
                $(".c1").css("display","block");
            });
        })
    </script>
</head>
<body>
<button id="bigger">放大</button>
<button id="small">缩小</button>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<div class="c1" style="width: 20%; background-color: pink;">
    <p>第1个段落</p>
    <p>第2个段落</p>
    <p>第3个段落</p>
    <p>第4个段落</p>
    <p>第5个段落</p>
</div>
</body>
</html>